﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PictureLoader.aspx.cs" Inherits="Corina.Webservice.Lantern.PictureLoader" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>上传图片</title>
    <script src="JS/CJL.0.1.min.js"></script>
    <script src="JS/ImagePreview.js"></script>
    <script src="JS/QuickUpload.js"></script>

    <style type="text/css">
        #newPreview{
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <%--<style>
            .perview {
                width: 600px;
                background: #fff;
                font-size: 12px;
                border-collapse: collapse;
            }

                .perview td, .perview th {
                    padding: 5px;
                    border: 1px solid #ccc;
                }

                .perview th {
                    background-color: #f0f0f0;
                    height: 20px;
                }

                .perview a:link, .perview a:visited, .perview a:hover, .perview a:active {
                    color: #00F;
                }

                .perview table {
                    width: 100%;
                    border-collapse: collapse;
                }
        </style>

        <style>
            /*file样式*/
            #idPicFile {
                width: 80px;
                height: 20px;
                overflow: hidden;
                position: relative;
                vertical-align:central;
                
            }

                #idPicFile input {
                    font-size: 20px;
                    cursor: pointer;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    filter: alpha(opacity=0);
                    opacity: 0;
                    outline: none;
                    hide-focus: expression(this.hideFocus=true);
                }
        </style>
        <table class="perview">
            <tr>
                <th align="right">选择图片： </th>
                <td width="75%">
                    <div id="idPicFile"><a style="color:cadetblue">添加图片</a></div>
                </td>
                <td>
                    <asp:Button Text="上传" runat="server" OnClick="Unnamed_Click"/>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <table>
                        <thead>
                            <tr>
                                <th>文件路径 </th>
                                <th width="30%">预览图 </th>
                                <th width="20%">操作 </th>
                            </tr>
                        </thead>
                        <tbody id="idPicList">
                            <tr>
                                <td></td>
                                <td align="center"></td>
                                <td align="center"><a href="#">移除</a></td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
        <script>

            var table = $$("idPicList"), model = table.removeChild(table.rows[0]);

            function AddPreview() {
                var file = document.createElement("input"),
                    img = document.createElement("img"),
                    ip = new ImagePreview(file, img, {
                        maxWidth: 150,
                        maxHeight: 100,
                        action: "ImagePreview.ashx",
                        onErr: function () { alert("载入预览出错！"); ResetFile(file); },
                        onCheck: CheckPreview,
                        onShow: ShowPreview
                    });
                file.type = "file"; file.name = "pic";
                file.onchange = function () { ip.preview(); };
                $$("idPicFile").appendChild(file);
            }

            //检测程序
            var exts = "jpg|gif|bmp|png", paths = "|";
            function CheckPreview() {
                var value = this.file.value, check = true;
                if (!value) {
                    check = false; alert("请先选择文件！");
                } else if (!RegExp("\.(?:" + exts + ")$$", "i").test(value)) {
                    check = false; alert("只能上传以下类型：" + exts);
                } else if (paths.indexOf("|" + value + "|") >= 0) {
                    check = false; alert("已经有相同文件！");
                }
                check || ResetFile(this.file);
                return check;
            }

            //显示预览
            function ShowPreview() {
                var row = table.appendChild(model.cloneNode(true)),
                    file = this.file, value = file.value, oThis = this;

                row.appendChild(file).style.display = "none";
                row.cells[0].innerHTML = value;
                row.cells[1].appendChild(this.img);

                row.getElementsByTagName("a")[0].onclick = function () {
                    oThis.dispose(); table.removeChild(row);
                    paths = paths.replace(value, ""); return false;
                };

                paths += value + "|";
                AddPreview();
            }

            AddPreview();


            function ResetFile(file) {
                file.value = "";//ff chrome safari
                if (file.value) {
                    if ($$B.ie) {//ie
                        with (file.parentNode.insertBefore(document.createElement('form'), file)) {
                            appendChild(file); reset(); removeNode(false);
                        }
                    } else {//opera
                        file.type = "text"; file.type = "file";
                    }
                }
            }

        </script>--%>
        <script type="text/javascript">

            function PreviewImg(imgFile) {
                var newPreview = document.getElementById("newPreview");
                newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
                newPreview.style.width = "80px";
                newPreview.style.height = "60px";
            }

            function Preview(image) {
                //alert(image.value);
                var img = document.getElementById("preview");
                img.src = image.Value;
            }
        </script>

        <asp:ScriptManager runat="server" />
        <table>
            <tr>
                <td colspan="2">
                    <asp:FileUpload runat="server" ID="uploader" onchange="Preview(this)" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="newPreview">
                    </div>
                    
                    <img id="preview">
                    <%--<asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <asp:Image runat="server" ID="previewImage" />
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="previewButton" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>--%>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button Text="预览" ID="previewButton" runat="server" Visible="false" />
                </td>
                <td>
                    <asp:Button Text="保存" ID="submitButton" runat="server" OnClick="Unnamed_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Label runat="server" ID="labelNotice" ForeColor="Red" />
                </td>
            </tr>
        </table>



    </form>
</body>
</html>
